<template>
	<view>
		<u-popup :show="show" mode="center" round="4" closeable :customStyle="{padding: '5px 10px', width: '80vw', 'box-shadow': '0 25px 45px #0006'}" @close="close" @open="open">
			<view class="text-base" style="padding: 7px 0;">消费明细</view>
			<view v-if="show">
				<z-paging unit="px" ref="orderListPaging" :fixed="false" height="50vh" use-virtual-list @query="getOrderList">
					<view slot="cell" slot-scope="{item,index}">
						<view class="bg-white" style="padding: 5px 0; margin-bottom: 10px; border-radius: 4px;">
							<view class="Media">
								<view class="Media-body text-xs" style="padding: 0 10px;">
									<view class="Grid">
										<view style="margin-bottom: 5px; width: 70%;">{{item.title}}</view>
										<view class="Grid-cell text-right">&yen;{{item.price}}</view>
									</view>
									<view class="Grid">
										<view class="Grid-cell">{{item.pay_time}}</view>
										<view class="text-right">实付：{{item.pay_real}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapState,
	} from "vuex";
	import {
		getOrderList
	} from '@/service/index'

	export default {
		props: {
			data: {
				type: Object,
				default: {}
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			// 开启弹窗
			open() {
				this.show = true
			},
			async getOrderList(page, limit) {
				try {
					const {
						data: {
							list,
							total,
						}
					} = await getOrderList({
						page: page,
						limit: limit,
						member_id: this.data.member_id,
						status: 9999,
						orders: 5
					})
					this.$emit('getList', total)
					this.$refs.orderListPaging.complete(list || []);
				} catch (e) {
					
				}
			},
			// 关闭弹窗
			close() {
				this.show = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	
</style>